import React from 'react';
import { useState } from 'react'
// 函数组件
// 引入第一个hooks  useState;
// hooks定义:
// 01: 本质是一个函数, 以 use 开头的函数
// 02: 在函数组件中使用, 是函数组件有类似类组件的功能

// hooks 使用的限制条件
// 条件1: 只能函数组件内使用
// 条件2: hooks不能被有条件的调用使用

// useState ()
// 语法: const [变量名,方法] = useState(初始值)
// 该hooks 返回一个数组接口, 接收形参, 形参为state 数据的初始值,
// 数组第一项为 初始值,
// 数组第二项为一个函数,函数的作用就是用来修改初始值的,并且只能通过该方法去修改该变量
// 一般 方法名 都叫set变量名

// 修改方法两种写法:
//方法1: setCount(要修改的新值)
//方法2: setCount((m)=>return 返回值) 返回值就是赋值的新值 ,参数m 为要修改的数据



// const FN = () => {
//     const [count, setCount] = useState(0)
//     console.log(123);
// }
// FN()
// console.log('useState', useState);
// const [count, setCount] = useState(0)


const Father = () => {
    // if (true) {
    //     const [count, setCount] = useState(0)
    // }
    // FN()
    // console.log(useState(0));
    // 操作基本数据类型
    const [count, setCount] = useState(0);
    const addCountFn = () => {
        // setCount(count + 1)
        setCount((m) => {
            console.log('m', m); // m 为要修改的数据变量
            return count + 1
        })
    }

    // 操作引用数据类型
    const [userObj, setUserObj] = useState({ name: '李寻欢', age: 30 });
    // console.log('userObj', userObj);
    // 注意: setUserObj()里面是替换操作, 不是合并操作
    // 之前在类组件中, this.setState() 是合并操作, redux 中替换操作,需要保留原数据
    const editUserFn = () => {
        // setUserObj({
        //     ...userObj,
        //     age: userObj.age + 1
        // })

        // 对于引用数据类型, 不能传原变量名如 userObj,react会认为这两个变量指向同一个内存地址
        // 相当于使用原对象修改原对象
        //userObj.age = userObj.age + 1;
        // console.log(userObj);
        // setUserObj({ ...userObj })

        setUserObj((m) => {
            return {
                ...m,
                age: m.age + 1
            }
        })
    }

    // 操作引用数据类型,操作数组
    const [nameArr, setNameArr] = useState([{
        id: 1,
        name: '天机老人'
    }, {
        id: 2,
        name: '上官惊鸿'
    }, {
        id: 3,
        name: '小李飞刀'
    }])

    return (
        <div>
            {/* 使用基本数据类型 */}
            {/* <p onClick={() => { setCount(count + 1) }}>count:{count}</p> */}
            <p onClick={() => { addCountFn() }}>count:{count}</p>

            {/* 使用引用数据类型 */}
            <p onClick={() => editUserFn()}>{userObj.name}-{userObj.age}</p>

            {/* 遍历数组 */}
            <p><button onClick={() => {
                nameArr.push({ id: nameArr[nameArr.length - 1].id + 1, name: '阿飞' })
                setNameArr([...nameArr])
            }}>添加新人</button></p>
            <ul>
                {
                    nameArr.map(item => <li key={item.id}>{item.id}--{item.name}</li>)
                }
            </ul>
        </div>
    );
}

export default Father;
